<template>
  <div>
    <div class="news-title flex-a flex-b">
      <div class="flex-a">
        <span>活动进行中</span>
      </div>
      <!-- <div class="more flex flex-a"><span>查看更多</span>
        <Right color="#000000" size="12" />
      </div> -->
    </div>
    <div class="new">
      <nut-swiper :init-page="1" :auto-play="2000" pagination-visible pagination-color="#CEF542"
        pagination-unselected-color="#ADB2B8">
        <nut-swiper-item style="height: 150px" v-for="(item, index) in goodsList" :key="item.goodsId">
          <div class="box flex-a">
            <div class="imgs">
              <img :src="item.goodsCoverImg" alt="">
            </div>
            <div class="product">
              <div class="title">{{ item.goodsName }}</div>
              <div class="price flex-a flex-b">
                <div>到手价<text>¥{{ item.sellingPrice }}</text></div>
                <div class="btn flex-a" @click="jumpTo('/packageA/pages/productDetail/index?goodsId=' + item.goodsId)">
                  <span>去下单</span>
                  <Right color="#ffffff" size="12" />
                </div>
              </div>
              <div class="origin">
                <div>市场参考价：<text>¥{{ item.originalPrice }}</text></div>
              </div>
            </div>
          </div>
        </nut-swiper-item>
      </nut-swiper>
    </div>
  </div>
</template>

<script lang="ts">
import Taro from '@tarojs/taro'
import { reactive, onMounted, ref } from 'vue';
import { Right } from '@nutui/icons-vue-taro';
import { getHotGoodList } from '../../../../api/index'
export default {
  components: {
    Right
  },
  setup() {
    const goodsList = ref([])
    const state = reactive({
      list: []
    });
    onMounted(() => {
      getHotGoodList().then(res => {
        if (res.resultCode == 200) {
          goodsList.value = res.data
        }
      })
    });
    const jumpTo = (url) => {
      Taro.navigateTo({ url: url });
    }
    return { state, jumpTo, goodsList };
  }
};
</script>
<style lang="scss">
.active-img {
  text-align: center;

  img {
    width: 100%;
    height: 260px;
  }
}

.new {
  padding: 20rpx 20rpx;
  border-radius: 20rpx;
  background: #fff;
  margin: 0 32rpx 20rpx;
  position: relative;
  z-index: 99;

  .buy {
    font-size: 32rpx;
    font-weight: bold;
    padding-left: 20rpx;
  }

  .box {
    margin-top: 20rpx;

    .imgs {
      width: 35%;
      box-sizing: border-box;
      margin-right: 2%;

      img {
        width: 100%;
        height: 200rpx;
      }
    }

    .product {
      width: 63%;
      box-sizing: border-box;
      // word-break: keep-all;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;

      .title {
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .price {
        color: #111407;
        margin: 10rpx 0;

        text {
          color: #5A5C53;
        }
      }

      .origin {
        color: #A9AAA5;
        font-size: 24rpx;

        text {
          text-decoration: line-through;
        }
      }

      .btn {
        width: 120rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        background: #111407;
        border-radius: 50rpx;
        color: #fff;
        font-size: 24rpx;
        margin: 0;
        display: flex;
        justify-content: center;
      }
    }
  }
}

.news-title {
  // width: 90%;
  margin: 0 32rpx 20rpx;
  box-sizing: border-box;
  padding-left: 10rpx;

  // span {
  //   margin-right: 20rpx;
  //   font-size: 36rpx;
  //   font-weight: bold;
  // }

  .countdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rpx;
    height: 50rpx;
    background: #FF7F31;
    color: #fff;
    font-size: 26rpx;
    border-radius: 10rpx;
  }

  .more {
    align-items: center;
    background: #CEF542;
    text-align: center;
    width: 180rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 50rpx;
    font-size: 24rpx;
    justify-content: center;
    white-space: nowrap;
  }
}

.goods-list::-webkit-scrollbar {
  display: none;
}

.goods-list {
  overflow-x: auto;
  width: 98%;
  margin: 0 32rpx 20rpx;
  white-space: nowrap;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;

  .goods-item {
    display: inline-block;
    width: 40%;
    margin-right: 10rpx;
    height: 320rpx;
    background: url(http://120.92.155.169:9095/uploadPath/2023/10/26/120231026105834.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;

    .img {
      background: #fff;
      text-align: center;
      height: 250rpx;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .time {
      position: absolute;
      right: 10rpx;
      bottom: 0rpx;
      color: #fff;

      .nut-countdown__content {
        font-size: 20rpx;
      }
    }

    .title {
      text-align: center;
      font-size: 26rpx;
      font-weight: bold;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #0B1117;
    }

    .bottom {
      justify-content: center;

      .sell {
        font-size: 24rpx;
        color: #FF5935;

        text {
          color: #CCCCCC;
        }
      }

      .orig {
        color: #CCCCCC;
        margin-left: 15rpx;
        text-decoration: line-through;
        font-size: 24rpx;
      }
    }
  }
}
</style>